<template>
  <div>
    <page-main>
      <el-table
        :data="tableData"
        border
        style="width: 100%;"
        height="50vh"
        v-loading="loading"
      >
        <el-table-column prop="order_no" label="工单编号" ></el-table-column>
        <el-table-column prop="report_title" label="工单标题"></el-table-column>
        <el-table-column prop="yj_unit_name" label="社会单位"></el-table-column>
        <el-table-column prop="wb_unit_name" label="维保单位"></el-table-column>
        <!-- <el-table-column prop="report_user_id " label="上报人"></el-table-column> -->
        <el-table-column
          prop="report_remark"
          label="上报描述"
        ></el-table-column>
        <el-table-column
          prop="report_images"
          label="上报图片"
        >
         <template #default="scope">
            <el-image
              style="width: 60px; height: 60px;"
              :src="upDataUrl + scope.row.report_images"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.report_images]"
            ></el-image>
          </template></el-table-column>
        <el-table-column prop="report_videos" label="上报视频">
           <template #default="scope">
                <video
              v-if="
                Object.prototype.toString.call(scope.row.report_videos) ==
                  '[object Array]' && scope.row.report_videos.length >= 1
              "
              width="60"
              height="60"
              controls="controls"
            >
              <source :src="scope.row.report_videos[0]" type="video/ogg" />
              <source :src="scope.row.report_videos[0]" type="video/mp4" />
              <source :src="scope.row.report_videos[0]" type="video/webm" />
              <object
                :data="scope.row.report_videos[0]"
                width="320"
                height="240"
              ></object>
            </video>
            <img
              v-else
              src="@/assets/images/errorVideo.png"
              style="width: 60px; height: 60px; margin-right: 20px;"
            />
           </template>
        </el-table-column>
        <!-- <el-table-column prop="exec_user_id" label="最新操作人"></el-table-column> -->
        <el-table-column prop="report_remark" label="操作描述"></el-table-column>
        <el-table-column
          prop="result_images"
          label="最新操作图片"
        >
         <template #default="scope">
            <el-image
              style="width: 60px; height: 60px;"
              :src="upDataUrl + scope.row.result_images"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.result_images]"
            ></el-image>
          </template></el-table-column>
        <el-table-column prop="result_videos" label="最新操作视频">
           <template #default="scope">
                <video
              v-if="
                Object.prototype.toString.call(scope.row.result_videos) ==
                  '[object Array]' && scope.row.result_videos.length >= 1
              "
              width="60"
              height="60"
              controls="controls"
            >
              <source :src="scope.row.result_videos[0]" type="video/ogg" />
              <source :src="scope.row.result_videos[0]" type="video/mp4" />
              <source :src="scope.row.result_videos[0]" type="video/webm" />
              <object
                :data="scope.row.result_videos[0]"
                width="320"
                height="240"
              ></object>
            </video>
            <img
              v-else
              src="@/assets/images/errorVideo.png"
              style="width: 60px; height: 60px; margin-right: 20px;"
            />
           </template>
        </el-table-column>
        <el-table-column label="工单进度" prop="schedule" :formatter="scheduleFormatter"></el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template #default="scope">
            <div>{{ $getDateTime(scope.row.create_time) }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="getDateList"
          v-model:currentPage="tableDataInfo.current_page"
          :total="tableDataInfo.total"
          :page-count="tableDataInfo.last_page"
          background
          layout="total,prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableDataInfo: {},
      upDataUrl: import.meta.env.DEV
        ? "/proxy/"
        : import.meta.env.VITE_APP_API_BASEURL,
      loading: false,
    };
  },
  created() {
    this.getDateList();
  },
  methods: {
      scheduleFormatter(row, column, cellValue, index){
          let temp = {
              1:'待处理',
              4:'待验收',
              5:'已完成',
              9:'不需要处理'
          }
          return temp[cellValue]
      },
     
    getDateList(page) {
      let unit_id = localStorage.getItem('fa_user_info')
      this.loading = true;
      let pageNum = 1;
      if (page) pageNum = page;
      
      this.$api
        .post("/unit/Dashboard/dangerList", { 
          type: "workOrder_total",
          page:pageNum,
          rows:10,
          unit_id:JSON.parse(unit_id).unit_id
          
       }).then((res) => {
          this.tableData = res.data.list;
          delete res.data.data;
          this.tableDataInfo = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.block {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
</style>
